<template>
  <div class="data-share-service-create">
    <BeForm v-model="formModel" :rules="rules" :fields="fields" labelWidth="120px" ref="formRef" :showOptions="false">
      <template #taskName="{ model, field }">
        <a-input v-model:value="model[field.prop]" v-bind="field.componentProps">
          <template #suffix>
            <a-tooltip title="仅由中文、英文、数字、中划线、下划线、小数点、圆括号、方括号组成；最大长度64位">
              <BeIcon icon="local:help" />
            </a-tooltip>
          </template>
        </a-input>
      </template>
      <template #taskStrategy>
        <a-form-item class="task-strategy-form-item">
          <div class="info-data-wrap">
            <a-checkbox v-model:checked="formModel.useWatermark">水印</a-checkbox>
            <div class="info-data-content" v-if="formModel.useWatermark">
              <div class="info-data__item">
                <h6 class="info-title">水印策略：</h6>
                <ul class="data-list">
                  <li class="data-item">
                    <p class="label">文本类文件：</p>
                    <p class="value">原地水印；</p>
                  </li>
                  <li class="data-item">
                    <p class="label">DMP文件：</p>
                    <p class="value">原地水印；</p>
                  </li>
                  <li class="data-item">
                    <p class="label">Excel文件：</p>
                    <p class="value">伪列水印；</p>
                  </li>
                  <li class="data-item">
                    <p class="label">数据库：</p>
                    <p class="value">原地水印；</p>
                  </li>
                </ul>
                <BeButton class="update-btn" type="primary">修改</BeButton>
              </div>
              <div class="info-data__item">
                <h6 class="info-title">水印内容：</h6>
                <a-radio-group class="radio-group" v-model:value="formModel.watermarkType">
                  <a-radio value="username">用户名</a-radio>
                  <a-radio value="time">时间</a-radio>
                  <a-radio value="both">用户名+时间</a-radio>
                  <a-radio value="custom">自定义</a-radio>
                  <a-input class="other-input" v-if="formModel.watermarkType === 'custom'" v-model:value="formModel.customWatermark" placeholder="请输入自定义" />
                </a-radio-group>
              </div>
            </div>
          </div>
          <div class="info-data-wrap">
            <a-checkbox v-model:checked="formModel.useDesensitize">脱敏</a-checkbox>
            <div class="info-data-content info-form-data-content" v-if="formModel.useDesensitize">
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item label="脱敏策略" labelAlign="right" :labelCol="{ style: { width: '100px' } }">
                    <a-select v-model:value="formModel.desensitizeStrategy">
                      <a-select-option value="策略A">南网总调变电站数据脱敏策略</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item name="textSeparator" label="文本分隔符" labelAlign="right" :labelCol="{ style: { width: '100px' } }">
                    <a-select v-model:value="formModel.textSeparator">
                      <a-select-option value=".">.</a-select-option>
                      <a-select-option value=",">,</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="文本包围符" labelAlign="right" :labelCol="{ style: { width: '100px' } }">
                    <a-select v-model:value="formModel.textWrapper">
                      <a-select-option v-for="(item, index) in textWrapperOptions" :value="item.value" :key="index">{{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="识别率" labelAlign="right" :labelCol="{ style: { width: '100px' } }">
                    <a-select v-model:value="formModel.sensitivity" labelAlign="right" :labelCol="{ style: { width: '140px' } }">
                      <a-select-option value="50%">50%</a-select-option>
                      <a-select-option value="80%">80%</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="固定抽取最大记录数" labelAlign="right" :labelCol="{ style: { width: '140px' } }">
                    <a-input v-model:value="formModel.maxRecords" placeholder="1000" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-form-item>
      </template>
      <template #advancedOptions>
        <div class="info-data-wrap">
          <div class="info-data-content info-form-data-content">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="编码方式">
                  <a-select v-model:value="formModel.encoding">
                    <a-select-option value="UTF-8">UTF-8</a-select-option>
                    <a-select-option value="GBK">GBK</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="并发数">
                  <a-input-number v-model:value="formModel.threadCount" :min="1" :max="100" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </template>
    </BeForm>
    <div class="option-btns">
      <a-button>取消</a-button>
      <a-button type="default">创建任务并预览</a-button>
      <a-button type="primary" @click="handleSubmit()">提交任务</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FieldItem } from '@/components/basics/BeForm'
import { DataMaskMode } from '@/enums/dataMaskEnum'

const formRef = ref()
const formModel = ref({})

const rules = {}

const fields: FieldItem[] = [
  {
    label: '任务名称',
    prop: 'taskName',
    formItemProps: {
      required: true,
      rules: [{ required: true, message: '请输入任务名称' }]
    }
  },
  {
    label: '工单号',
    prop: 'workCode',
    component: 'Input'
  },
  {
    label: '供数方',
    prop: 'supplier',
    component: 'Input',
    formItemProps: {
      required: true,
      rules: [{ required: true, message: '请输入供数方' }]
    }
  },
  {
    label: '用数方',
    prop: 'consumer',
    component: 'Input',
    formItemProps: {
      required: true,
      rules: [{ required: true, message: '请输入用数方' }]
    }
  },
  {
    label: '任务模式',
    prop: 'mode',
    component: 'ApiSelect',
    componentProps: {
      options: [
        { label: '立即执行', value: DataMaskMode.Immediate },
        { label: '定时执行', value: DataMaskMode.Delay },
        { label: '周期执行', value: DataMaskMode.Schedule }
      ]
    },
    formItemProps: { required: true }
  },
  {
    label: '周期类型',
    prop: 'cycle',
    component: 'ApiSelect',
    componentProps: {
      options: [
        { label: '每分钟', value: 'minutely' },
        { label: '每小时', value: 'hourly' }
      ]
    },
    formItemProps: { required: true }
  },
  {
    label: '执行时间',
    prop: 'executeTime',
    component: 'ApiSelect',
    componentProps: {
      options: [
        { label: '1分钟', value: '1分钟' },
        { label: '5分钟', value: '5分钟' }
      ]
    },
    formItemProps: { required: true }
  },
  {
    prop: 'executeTime1',
    label: ''
  },
  {
    label: '供给方式',
    prop: 'supplyType',
    component: 'ApiSelect',
    componentProps: {
      options: [
        { label: '文件->文件', value: 'file2file' },
        { label: '数据库->文件', value: 'db2file' }
      ]
    },
    formItemProps: { required: true }
  },
  {
    prop: 'supplyTyp1',
    label: ''
  },
  {
    label: '源资产地址',
    prop: 'source',
    component: 'ApiSelect',
    componentProps: {
      options: [{ label: 'OSS', value: 'OSS' }]
    },
    formItemProps: { required: true }
  },
  {
    label: '目录',
    prop: 'sourceDir',
    component: 'Input',
    componentProps: { placeholder: 'XX目录' }
  },
  {
    label: '目标资产地址',
    prop: 'target',
    component: 'ApiSelect',
    componentProps: {
      options: [{ label: 'OSS', value: 'OSS' }]
    },
    formItemProps: { required: true }
  },
  {
    label: '目录',
    prop: 'targetDir',
    component: 'Input',
    componentProps: { placeholder: 'XX目录' }
  },
  {
    label: '任务策略',
    prop: 'taskStrategy',
    colProps: { span: 24 }
  },
  {
    label: '高级选项',
    prop: 'advancedOptions',
    colProps: { span: 24 }
  }
]
const textWrapperOptions = ref([
  { value: "'", label: "'" },
  { value: '"', label: '"' }
])

const handleSubmit = async () => {
  await formRef.value.formRef.validate?.()
  console.log('提交的表单数据:', formModel.value)
}
</script>

<style lang="scss">
.data-share-service-create {
  height: 100%;
  padding: 20px;
  overflow: auto;
  background-color: var(--color-white);
  .task-strategy-form-item {
    margin-bottom: 0;
  }
  .info-data-wrap {
    margin-bottom: 20px;
    .info-data-content {
      padding: 20px;
      margin-top: 10px;
      border: 1px solid var(--border);
      &.info-form-data-content {
        padding-bottom: 0;
      }
    }
    .info-data__item {
      position: relative;
      display: flex;
    }
    .info-title {
      line-height: 24px;
    }
    .update-btn {
      position: absolute;
      top: 0;
      right: 0;
    }
    .data-list {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      overflow: hidden;
      .data-item {
        display: flex;
        width: 50%;
      }
    }
    .other-input {
      width: 200px;
    }
  }
  .option-btns {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    .option-btn {
      padding: 4px;
    }
  }
}
</style>
